<template>
    <div class="">
        <div class="float_left tree_box">
            <h4 class="margin_bottom20">栏目管理</h4>
            <div class="clear"></div>
            <el-button type="primary" size="small" @click="dialogFormVisible=true"><i class="iconfont icon-plus"></i>新增</el-button>
            <el-button type="danger" size="small"  icon="delete" @click="deleteCat(selectedCat.id)" :disabled="!selected">删除</el-button>

            <el-table ref="singleTable"
                :data="tableData" 
                border style="width: 100%; text-align: center;margin-top:10px;"
                highlight-current-row
                stripe
                @current-change="currentChange">
                <el-table-column prop="name" header-align="center" label="栏目名称"></el-table-column>
            </el-table>
        </div>
        <div class="operate_main">
            <h4 class="margin_bottom20">详细信息</h4>
            <el-form :inline="true" :model="selectedCat" label-width="200px">
                <el-form-item label="栏目名称">
                    <el-input v-model="selectedCat.name" placeholder="栏目名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="是否为父节点">
                    <el-radio-group v-model="selectedCat.isParent">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="显示顺序">
                    <el-input v-model="selectedCat.sortOrder" placeholder="值越小排序越前" size="small"></el-input>
                </el-form-item>
                <el-form-item label="最大商品数">
                    <el-input v-model="selectedCat.num" placeholder="请输入0~999" size="small"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="是否启用">
                    <el-switch v-model="selectedCat.status"></el-switch>
                </el-form-item>
                <br>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="selectedCat.remark" placeholder="说点什么...最多输入100个字符"></el-input>
                </el-form-item>
                <br>
                <el-form-item label=" " style="vertical-align: bottom">
                    <el-button type="primary" size="small" @click="update" :disabled="!selected">保存修改</el-button>
                </el-form-item>
            </el-form>

        </div>

        <!-- 表单弹窗 -->
        <el-dialog 
          title="添加栏目" 
          v-model="dialogFormVisible"
          :before-close="handleClose">
            <el-form :model="contentCat" ref="contentCatForm">
                <el-form-item label="栏目名称" :rules="[{ required: true, message: '名称不能为空'}]">
                    <el-input v-model="contentCat.name" placeholder="栏目名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="是否为父节点">
                    <el-radio-group v-model="contentCat.isParent">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="显示顺序" :rules="[{ required: true, message: '顺序不能为空'}]">
                    <el-input v-model="contentCat.sortOrder" placeholder="值越小排序越前" size="small"></el-input>
                </el-form-item>
                <el-form-item label="最大商品数" :rules="[{ required: true, message: '数量不能为空'}]">
                    <el-input v-model="contentCat.num" placeholder="请输入0~999" size="small"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="contentCat.status"></el-switch>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="contentCat.remark" placeholder="说点什么...最多输入100个字符"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addContentCat">确 定</el-button>
            </div>
        </el-dialog>

        <div class="clear"></div>

    </div>
</template>
<script>
let id = 1000;

export default {
  name: "app",
  data() {
    return {
      tableData: [],
      contentCat: {
        id: "",
        parentId: "",
        name: "",
        status: true,
        sortOrder: "",
        isParent: 1,
        created: "",
        updated: "",
        num: "",
        remark: ""
      },
      selectedCat: {},
      selected: false,
      dialogFormVisible: false,
    };
  },
  methods: {
    currentChange(currentRow, oldCurrentRow) {
      this.selected = true;
      this.selectedCat = currentRow;
      this.selectedCat.status = this.selectedCat.status ? true : false;
    },

    //修改栏目的基本信息
    update() {
      this.selectedCat.status = this.selectedCat.status ? 1 : 0;
      this.$axios
        .post(API.rootPath + "/content-categorys", this.selectedCat, {
          emulateJSON: false
        })
        .then(response => {
          if (response.data.status == 0) {
            this.$message({
              message: "修改成功",
              type: "success",
              customClass: "messageDIY"
            });
            this.selectedCat.status = this.selectedCat.status ? true : false;
          }
        });
    },

    //添加种类的保存方法
    addContentCat() {
      this.contentCat.status = this.contentCat.status ? 1 : 0;
      this.$axios
        .post(API.rootPath + "/content-categorys", this.contentCat, {
          emulateJSON: false
        })
        .then(response => {
          if (response.data.status == 0) {
            this.$message({
              message: "保存成功",
              type: "success",
              customClass: "messageDIY"
            });

            //重置表单，其实就是将表单的内容设置为空
            this.$refs["contentCatForm"].resetFields();

            //关闭添加窗口
            this.dialogFormVisible = false;
            this.loadData();
          }
        });
    },

    deleteCat(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.delete(API.rootPath + "/content-categorys/" + id).then(
            response => {
              //返回值是0的时候表示成功,重新加载数据
              if (response.data.status == 0) {
                //删除成功之后重新加载数据
                this.loadData();

                this.selectedCat = {
                  id: "",
                  parentId: "",
                  name: "",
                  status: true,
                  sortOrder: "",
                  isParent: 1,
                  created: "",
                  updated: "",
                  num: "",
                  remark: ""
                };
                // this.currentChange(this.selectedCat, null);
              }
            },
            response => {
              // error callback
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    loadData() {
      this.$axios
        .get(API.rootPath + "/content-categorys")
        .then(
          response => {
            // console.log(response.body.data);

            this.tableData = response.data.data.rows;
            // this.selectedCat = this.tableData[0];
            // this.$refs.singleTable.setCurrentRow(this.tableData[0])
            // this.currentChange(this.tableData[0])
        });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  },
  created() {
    this.loadData();
  }
};
</script>
